<template>
  <div class="app-container">
    <el-row>
      <el-col>
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
                 label-width="88px"
        >
          <el-form-item label="关键字" prop="keyword">
            <el-input v-model="queryParams.keyword" placeholder="" clearable @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="平台" prop="status">
            <el-select v-model="queryParams.platform" placeholder="请选择" clearable @keyup.enter.native="handleQuery">
              <el-option label="崇州" :value="0" />
              <el-option label="达州" :value="-1" />
              <el-option label="成都" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
            >添加
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"

            >修改
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"

            >删除
            </el-button>
          </el-col>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getTableList"></right-toolbar>
        </el-row>


        <el-table :data="tableData" :load="load" @selection-change="handleSelectionChange" row-key="id"
                  :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        >
          <el-table-column label="名称" align="center" prop="name" width="180" />
          <el-table-column label="上传人" align="center" prop="send" width="180" />
          <el-table-column label="接收人" align="center" prop="reserve" width="180" />
          <el-table-column label="安全" align="center" prop="safe" width="180" />

          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleDetail(scope.row)"
              >详情
              </el-button>
              <el-button
                v-if="scope.row.parentId"
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleSetting(scope.row)"
              >配置
              </el-button>
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="total>0" :total="total" :page.sync="queryParams.currPage"
                    :limit.sync="queryParams.pageSize" @pagination="getTableList"
        />
        <!--        新增和配置弹窗-->
        <el-dialog :title="updateTitle" :visible.sync="updateOpen" width="700px" append-to-body>
          <el-form ref="formData" :model="formData" label-width="100px" :rules="rules">

            <el-form-item label="名称" prop="name" required>
              <el-input v-model="formData.name" placeholder="" :disabled="detailDisabled" />
            </el-form-item>
            <el-form-item label="描述" prop="description" required>
              <el-input v-model="formData.description" placeholder="" type="textarea" row="2"
                        :disabled="detailDisabled"
              />
            </el-form-item>
            <el-form-item label="安全" prop="safety">
              <el-radio-group v-model="formData.safety" :disabled="detailDisabled">
                <el-radio :label="1">公开</el-radio>
                <el-radio :label="2">加密</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="上传人" :disabled="uploaderDisable">
              <el-select v-model="formData.uploader" multiple placeholder="" :disabled="detailDisabled">
                <el-option
                  v-for="item in userOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="接受人" v-if="!personShow" :disabled="uploaderDisable">
              <el-select v-model="formData.recipienter" multiple placeholder="">
                <el-option
                  v-for="item in userOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-dialog>
        <!--         查看详情对话框-->
<!--        <el-dialog :title="detailTitle" :visible.sync="detailOpen" width="1200px" append-to-body>-->
<!--          <el-descriptions :column="2" border>-->
<!--            <el-descriptions-item label="产品名称" >-->
<!--              崇州市2024年财政情况-->
<!--            </el-descriptions-item>-->
<!--            <el-descriptions-item label="产品描述">18100000000</el-descriptions-item>-->
<!--            <el-descriptions-item label="安全">加密</el-descriptions-item>-->
<!--            <el-descriptions-item label="上传人">-->
<!--              <el-tag size="small">张三</el-tag>-->
<!--            </el-descriptions-item>-->
<!--          </el-descriptions>-->
<!--          <el-table :data="operateData" :load="load" row-key="id"-->
<!--                    style="width: 100%"-->
<!--          >-->
<!--            <el-table-column label="时间" align="center" prop="time" width="180" />-->
<!--            <el-table-column label="名称" align="center" prop="name" width="180" />-->
<!--            <el-table-column label="操作人" align="center" prop="operator" width="180" />-->
<!--            <el-table-column label="描述" align="center" prop="detail" />-->
<!--          </el-table>-->
<!--        </el-dialog>-->
      </el-col>
    </el-row>

  </div>
</template>

<script>


let id = 1000

export default {
  name: 'index',
  data() {
    return {
      personShow: true,//是否显示接受人
      tableData: [{
        id: 1,
        name: '李四',
        send: '张三',
        reserve: '王小虎',
        safe: '公开'
      }, {
        id: 2,
        name: '赵明煦',
        send: '于文容',
        reserve: '穆逸帆',
        safe: '加密'
      }, {
        id: 3,
        name: '李穆白',
        send: '张潇然',
        reserve: '曾岩溪',
        safe: '加密',
        children: [{
          id: 31,
          parentId: 3,
          name: 'D485476',
          send: '张雪宜',
          reserve: '王二虎',
          safe: '加密'
        }, {
          id: 32,
          parentId: 3,
          name: 'E5874545',
          send: '张小',
          reserve: '王二虎',
          safe: '加密'
        }]
      }, {
        id: 4,
        name: '李四',
        send: '张小',
        reserve: '王二虎',
        safe: '加密'
      }],
      userOptions: [
        {
          value: 1,
          label: 'admin'
        },
        {
          value: 2,
          label: 'zcl01'
        },
        {
          value: 3,
          label: '崇州'
        },
        {
          value: 4,
          label: '达州'
        }
      ],
      // 查询数据通道参数
      queryParams: {
        keyword: '',
        platform: 0,
        pageSize: 10,
        currPage: 1
      },
      //显示搜索表单
      showSearch: true,
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 注册/修改数据通道对话框
      updateOpen: false,
      updateTitle: '',
      uploaderDisable: false,
      // 查看详情对话框
      detailOpen: false,
      load: false,
      detailTitle: '',
      formData: {
        safety: 1,
        description: '',
        name: '',
        uploader: 1,
        recipienter: 1
      },//新增表单
      rules: {},//新增表单校验规则

      detailDisabled: true,//查看详情表单禁用

      total: 0,//表格总数
      // 多选框选中的id
      selIds: [],
      //操作记录表格数据
      operateData: [
        {
          time: new Date(),
          name: '下载产品',
          operator: '张三',
          detail: '下载了产品'
        },
        {
          time: new Date(),
          name: '上传产品',
          operator: '张三娃',
          detail: '上传了产品'
        }
      ]
    }
  },
  created() {

  },
  watch: {},
  methods: {

    getTableList() {
      this.loading = true
      //TODO 获取表格数据
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getTableList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')//全局方法
      this.handleQuery()
    },
    /** 新增按钮操作 */
    handleAdd(data) {
      // this.reset();
      this.detailDisabled = false
      this.updateOpen = true
      console.log(data)
      this.updateTitle = '注册上报产品'
    },
    // 修改按钮
    handleUpdate() {

    },
    // 详情按钮操作
    handleDetail(data) {
      if (data.parentId) {
        this.detailTitle = '订单详情'
        this.detailOpen = true
        this.baseDetailForm = data
      } else {
        this.updateTitle = '上报产品详情'
        this.updateOpen = true
        this.detailDisabled = true
      }
    },
    // 配置按钮
    handleSetting(data) {
      this.updateTitle = '上报产品详情'
      this.updateOpen = true
      this.detailDisabled = true
      this.uploaderDisable = false
      this.personShow = false
    },
    // 删除按钮
    handleDelete() {

    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      // console.log('selection', selection)
      this.selIds = selection.map((item) => item.id)
      // console.log('selItems', this.selItems)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },

    // 提交按钮
    submitForm() {
      //TODO 提交表单
    },

    // 取消按钮
    cancel() {
      this.formData = {}
      this.updateOpen = false
    }
  }
}
</script>
<style>
.el-row {
  margin-bottom: 10px;
}
</style>
